<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        width: 300px;
        font-size: 15px;
        border: 1px solid red;
        overflow: hidden;   
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        
    }

    .on {
        width: 300px;
        font-size: 15px;
        border: 1px solid red;
    }
</style>

<body>
    <div class="box">
        如果不是相互喜欢，你的痴情就是别人的负担，别去打扰那些已活在你记忆中的人，也许这才是最适合你们的距离。
        我先是没能变成你喜欢的样子，然后也没能变成自己喜欢的样子。前前后后，丢了个彻底。
        你不是孙悟空，也不是至尊宝，你只是城墙下那群人中的一个。观望着别人的爱情，咀嚼着自己的青春，活得像条狗。
    </div>
    <button id="aa">展开</button>
    <!-- <button id="bb">折叠</button> -->
</body>
<script>
    var box = document.querySelector('.box');

    // aa.onclick = function () {
    //     box.style.overflow = 'none';
    //     box.classList.remove('box');
    //     box.classList.add('on');
    // }
    // bb.onclick = function () {
    //     box.classList.remove('on');
    //     box.classList.add('box');
    // }
    aa.onclick = function () {
        if (aa.innerHTML == '展开') {
            aa.innerHTML = '折叠';
            box.classList.add('on');
            box.classList.remove('box');
        } else if (aa.innerHTML == '折叠') {
            aa.innerHTML = '展开';
            box.classList.add('box');
            box.classList.remove('on');
        }
    }

</script>

</html>